<template>
  <view>
    <!-- #ifdef APP-PLUS || MP-WEIXIN -->
    <view class="position-fixed left-0 right-0 top-0 main-bg-color" :style="{'z-index': 100}">
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <view class="position-fixed left-0 right-0 main-bg-color" :style="{top: '44px','z-index': 100}">
    <!-- #endif -->
			<u-search margin="30rpx 10rpx" v-model="key" animation @custom="custom" @search="custom" @clear="clear" :actionStyle="{color: '#fff'}" ></u-search>
      <!-- <u-tabs :list="list" :is-scroll="false" :current="current" @change="tabClick"></u-tabs> -->
      <dy-tabs :list="tabs" @click="tabSecendClick" @choice="choice"></dy-tabs>
    </view>
    <!-- 滚动区域 -->
    <mescroll-body ref="mescrollRef" :top="height" @init="mescrollInit" @down="downCallback" @up="upCallback">
      <view class="" id="tabInList">
        <!-- 商品 -->
        <view class="flex flex-wrap justify-between u-m-x-25 u-m-y-10" v-show="current == 0">
          <block v-for="(item,index) in goods" :key="item.id">
            <view class="flex flex-column u-m-b-20 rounded-10 bg-white overflow-hidden" style="width: 340rpx;" @click="toDetail(item.id)">
              <image :src="item.image" style="width: 340rpx;height: 340rpx;" mode="aspectFill"></image>
              <text class="u-p-x-20 u-p-t-20 u-font-12 text-ellipsis-2" style="height: 80rpx;">{{item.goods_name}}</text>
              <text class="u-p-x-20 u-p-t-20 u-font-30 text-danger">¥ {{item.goods_min_price || '0.00'}}</text>
              <view class="flex align-center justify-between u-p-x-20 u-p-b-20 u-p-t-10 ">
                <text class="u-p-x-10 text-white main-bg-color rounded-8" style="height: 35rpx;line-height: 35rpx;" v-if="item.merch_id==0">自营</text>
                <text>已售{{item.goods_sales}}件</text>
              </view>
            </view>
          </block>
        </view>
        <!-- 商户 -->
        <view class="u-m-x-25" v-show="current == 1">
          <view class="u-p-20 u-m-b-20 rounded-20 bg-white" v-for="(item,index) in goods" :key="item.id">
            <dy-supplier-sec-item :item="item" imgSize="120rpx"></dy-supplier-sec-item>
          </view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
  import { GoodsCenterApi } from '@/api/serves.js'
  import { SupplierCenterApi } from '@/api/serves.js'
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
        list: [{
          name: '商品',
          tabs: [{
              name: '综合',
              sort: false,
              goods: [],
            },
            {
              name: '销量',
              sort: false,
              goods: null,
            },
            {
              name: '价格',
              sort: true,
              goods: null,
            }
          ],
        }, {
          name: '店铺',
          goods: null,
        }],
        current: 0, // 一级菜单下标
        secendTabIndex: 0, // 二级菜单下标
        key: '',
        formData: {//商品
          id:-1,
          types:'normal',
          name:'',  // 关键字
          is_merch:0,  // 是否自营
          goods_min_price:'',  
          goods_max_price:'',
		  		goods_type:2,
        },
        shopFormData: {
          id:-1,
          name:''
        },
      }
    },
    computed: {
      // 列表数据
      goods() {
        if(this.current == 0) return this.list[0].tabs[this.secendTabIndex].goods
        return this.list[1].goods
      },
      height() {
        return this.current == 1? '184rpx': '264rpx'
      },
      tabs() {
        return this.list[0].tabs
      }
    },
    methods: {
      // 一级菜单的点击
      tabClick(index) {
        console.log('一级菜单的点击', index);
        // 记录切换前滚动条的位置
        if(this.current == index) return
        this.current = index
        // 当前菜单的数据
        let curTab = index == 1? this.list[1]:this.list[0].tabs[this.secendTabIndex]
        this.mescroll.resetUpScroll()
      },
      // 二级菜单点击
      tabSecendClick(index) {
        this.secendTabIndex = index;
        let obj = {
          0: 'normal',
          1: 'sales',
          2: (!this.formData.types)?'price':(this.formData.types == 'price')?'max_price':'price'
        }
        this.formData.types = obj[index]
        console.log('搜索条件', this.formData);
        this.mescroll.resetUpScroll()
      },
      /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
      upCallback(page) {
        // 商品数据
        if(this.current == 1) return this.getMerchIndex(page)
        this.getCategoryList(page)
      },
      // 商品搜索
      getCategoryList(page) { 
				uni.showLoading()
        this.formData.page = page.num
        GoodsCenterApi.category_list(this.formData).then(res => {
					uni.hideLoading()
          console.log('商品数据', res);
          if (res.code == 1) {
            let currentTab = this.list[0].tabs[this.secendTabIndex]
            if(page.num == 1) currentTab.goods = []
            currentTab.goods = currentTab.goods.concat(res.data.listdata);
            this.mescroll.endSuccess(res.data.listdata.length, res.data.pagedata.total); // 石佛欧有下一页
            // console.log('商品搜索',this.list[0].tabs[this.secendTabIndex]);
          }else {
						this.$u.toast(res.msg);
					}
        }).catch(()=>{
        	//联网失败, 结束加载
        	this.mescroll.endErr();
        })
      },
      // 商户搜索
      getMerchIndex(page) { 
        uni.showLoading()
        this.shopFormData.page = page.num
        SupplierCenterApi.getMerchIndexList(this.shopFormData).then(res => {
          // console.log('商户搜索', res);
          uni.hideLoading()
          if (res.code == 1) {
						res.data.forEach(item=> {
							item.merch_id = item.id
						})
            let currentTab = this.list[this.current]
            if(page.num == 1) currentTab.goods = []
            currentTab.goods = currentTab.goods.concat(res.data);
            this.mescroll.endByPage(res.data.length, res.totalpage); // 石佛欧有下一页
            // console.log('商户搜索111', this.list[1]);
          }else {
						this.$u.toast(res.msg);
					}
        }).catch(()=>{
        	//联网失败, 结束加载
        	this.mescroll.endErr();
        })
      },
      // 根据搜索内容搜索内容
      custom(key){ 
        // console.log('根据搜索内容搜索内容', key);
        if(this.current == 1) this.shopFormData.name = key
        this.formData.name = key
				this.mescroll.resetUpScroll()
      },
      clear() {
        this.key = ''
        this.formData.name = ''
        this.shopFormData.name = ''
        this.mescroll.resetUpScroll()
      },
			choice(min, max) {
				this.formData.goods_min_price = min
				this.formData.goods_max_price = max
				this.mescroll.resetUpScroll()
			},
			toDetail(id) {
				uni.navigateTo({
				  url:'/pages/goodsDetail/commonGoodsDetail/commonGoodsDetail?goods_id='+ id
				})
			}
    },
  }
</script>

<style>
  .demo-tip {
    padding: 18rpx;
    font-size: 24rpx;
    text-align: center;
  }
</style>
